<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>汇总</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/echarts.css">
</head>
<body>
<div class="all">
    <blockquote class="layui-elem-quote" style="border-left: 5px solid #ffffff">
        <fieldset class="layui-elem-field">
            <legend>事故信息汇总</legend>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">年份</label>
                        <div class="layui-input-inline">
                            <input type="text" placeholder="yyyy年" class="layui-input date" id="year">
                        </div>
                        <div class="layui-input-inline">
                            <button class="layui-btn echartQuery">查询</button>
                        </div>
                    </div>
                </div>
        </fieldset>
    </blockquote>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="bar"></div>
    <div id="kind"></div>
</div>
<script src="js/echarts.min.js"></script>
<script src="js/shine.js"></script>
<!-- <script src="js/dist/echarts.js"></script> -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="layui/layui.js"></script> 
<script type="text/javascript">
    layui.use(['layer','laydate'], function() {
        var $ = layui.jquery,
                layer = layui.layer,
        laydate = layui.laydate;
        laydate.render({
            elem:'.date',
            type:'year'
        });
        drawEcharts();
         $(".echartQuery").click(function(){
        	drawEcharts();
        });
    });
    </script> 
    <script type="text/javascript">
   /* require.config({
        paths: {
            echarts: 'js/dist/'
        }
    });
    // 使用
    require(
            [
                'echarts',
                'echarts/chart/line',
                'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                'echarts/chart/pie',
                'echarts/chart/funnel'
            ],
            drawEcharts
    ); */
   function drawEcharts(ec) {
        drawMonth(ec);
        drawKind(ec);
    } 
    // 事故发生月份
    function drawMonth(ec) {
        // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById('bar'),'shine');
		var date = new Date();
		var year = date.getFullYear();
		if($("#year").val()==null || $("#year").val() ==""){
			$("#year").val(year);
		}
        var option = {
            title: {
                text: '事故发生月份统计'
            },
            tooltip: {
//                       axis： 显示该列下所有坐标轴所对应的数据。
                trigger: 'axis'
            },
            legend: {
                data: ['事故数']
            },
            toolbox: {
                show: true,//显示工具栏组件
                feature: {
                    mark: {show: true},//辅助线开关
                    dataView: {show: true, readOnly: false},//数据视图
                    magicType: {show: true, type: ['line', 'bar']},//动态类型切换
                    restore: {show: true},//重置
                    saveAsImage: {show: true}//保存图片
                }
            },
            calculable: true,//可计算特性
            xAxis: [
                {
                    type: 'category',//坐标轴类型，'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
                    data : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
                    axisLabel: {//坐标轴刻度标签的相关设置
                        interval: 0,//横轴信息全部显示
                        rotate: -30,//-30度角倾斜显示
                    },
                    splitLine: {
                        show: false             //是否显示分隔线。默认数值轴显示，类目轴不显示。
                    }

                }
            ],
            yAxis: [
                {
                    type: 'value',//坐标轴类型。'value' 数值轴，适用于连续数据。
                    name: '数量',  //坐标轴名称
                    min: 0,//坐标轴刻度最小值
                    max: 100,//坐标轴刻度最大值
                    interval: 10,//坐标轴刻度的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推
                    axisLabel: {//使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
                        formatter: '{value} '
                    },
                    splitNumber: 10,//坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整
                    splitLine: {
                        show: false             //是否显示分隔线。默认数值轴显示，类目轴不显示。
                    },
                    splitArea: {show: true}//显示分割区域
                }
            ],
            //sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构；对象内包含对象
            series: [
                {
                    name: '事故数', //系列名称，如果启用legend，该值将被legend.data索引相关
                    type: 'bar',
                    data : (function(){
                    	var counts = [];
                    	var year = $("#year").val();
                        $.ajax({
                        	async : false,
                        	url : "accident/echartCount?year="+year,
                        	success : function(data){
                        		for(var i = 0;i<12;i++){
                        			counts.push(data[i].accidentCount);
                        		}
                        	}
                        })
                        return counts;
                    })(),
                    //系列中的数据标注内容
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ],
                        itemStyle: {
                            normal: {
                                color: '#26C0C0',
                            }
                        }
                    },
                    //系列中的数据标线内容
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    },
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                color: '#6eaaee',
                                width: 3
                            },
                            color: function (params) {
                                var colorList = [
                                    '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                    '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                    '#D7504B', '#C6E579'
                                ];
                                return colorList[params.dataIndex]
                            },
                        }
                    }
                },
            ],

        };
        // 为echarts对象加载数据
        myChart.setOption(option);

    }
    //    事故发生种类
     function drawKind(ec) {
        var chart = echarts.init(document.getElementById('kind'),'shine');
        var option = {
        	backgroundColor: '#ffffff',//背景色
            title: {
                text: '事故发生种类',
                x:'center'
            },
            tooltip: {
                trigger: 'item',
                formatter:"{a} <br/>{b} : {c} <br/>所占百分比：{d}%"
            },
            legend: {
                orient: 'vertical',
                x:'left',
                formatter:function(params){//legend文字实现换行
                  var kind=params.valueOf();
                    if(kind.length>12){
                        return kind.substring(0,11)+"\n"+kind.substring(12);
                    }else{
                        return kind;
                    }
                },
                data: (function () {
                    var arr=[];
                    var year = $("#year").val();
                    $.ajax({
                        type: "post",
                        async: false, //同步执行
                        url: "accident/echartKind?year="+year,
                        dataType: "json", //返回数据形式为json
                        success: function (result) {
                            if (result) {
                            	arr.push({value:result[0].kind0,name:"碰撞事故"});
                            	arr.push({value:result[0].kind1,name:"搁浅事故"});
                            	arr.push({value:result[0].kind2,name:"触礁事故"});
                            	arr.push({value:result[0].kind3,name:"触损事故"});
                            	arr.push({value:result[0].kind4,name:"浪损事故"});
                            	arr.push({value:result[0].kind5,name:"火灾、爆炸事故"});
                            	arr.push({value:result[0].kind6,name:"风灾事故"});
                            	arr.push({value:result[0].kind7,name:"自沉事故"});
                            	arr.push({value:result[0].kind8,name:"其他事故"});
                            }
                        },
                        error: function (errorMsg) {
                            alert("不好意思,图表请求数据失败啦!");
                            chart.hideLoading();
                        }
                    })
                        return arr;
                })(),
            },
            toolbox: {
                show: true,//显示工具栏组件
                feature: {
                	 mark: {show: true},//辅助线开关
                     dataView: {show: true, readOnly: false},//数据视图
                     magicType: {show: true, type: ['pie', 'funnel']},//动态类型切换
                     restore: {show: true},//重置
                     saveAsImage: {show: true}//保存图片
                }
            },
            calculable: true,
            //sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构；对象内包含对象
            series: [
                {
                    name: '事故数',
                    type: 'pie',
                    radius: '55%',//饼图半径大小
                    center: ['60%', '62%'],//饼图的位置
                    data: (function () {
                        var arr=[];
                        var year = $("#year").val();
                        $.ajax({
                            type: "post",
                            async: false, //同步执行
                            url: "accident/echartKind?year="+year,
                            dataType: "json", //返回数据形式为json
                            success: function (result) {
                                if (result) {
                                	arr.push({value:result[0].kind0,name:"碰撞事故"});
                                	arr.push({value:result[0].kind1,name:"搁浅事故"});
                                	arr.push({value:result[0].kind2,name:"触礁事故"});
                                	arr.push({value:result[0].kind3,name:"触损事故"});
                                	arr.push({value:result[0].kind4,name:"浪损事故"});
                                	arr.push({value:result[0].kind5,name:"火灾、爆炸事故"});
                                	arr.push({value:result[0].kind6,name:"风灾事故"});
                                	arr.push({value:result[0].kind7,name:"自沉事故"});
                                	arr.push({value:result[0].kind8,name:"其他事故"});
                                }

                            },
                            error: function (errorMsg) {
                                alert("不好意思,图表请求数据失败啦!");
                                chart.hideLoading();
                            }
                        })
                            return arr;
                    })(),
                },
             ],
        };
        chart.setOption(option);
    } 
</script>
</body>
</html>